<template>
  <section class="user">
    <aside>
      <ul>
        <li :class="{active:nav==='user'}" @click="nav='user'">用户设置</li>
        <li :class="{active:nav==='unit'}" @click="nav='unit'">单位设置</li>
      </ul>
    </aside>
    <div class="container">
      <div class="unitBox" v-show="nav==='unit'">
        <el-form :inline="true" class="bottom-border">
          <el-form-item label="单位名称">
            <el-input v-model="unitName" placeholder="请输入单位名称" clearable size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="renewUnitName" size="mini">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="userBox" v-show="nav==='user'">
        <TableList :list="list" :column="column">
          <div slot="option" class="noBlueBg">
            <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="options.username" clearable placeholder="请输入用户名" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="options.realName" clearable placeholder="请输入姓名" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="options.mobile" clearable placeholder="请输入手机号码" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="company">
                <el-input v-model="options.company" clearable placeholder="请输入单位" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="部门" prop="department">
                <el-input v-model="options.department" clearable placeholder="请输入单位" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="群组" prop="groups">
                <el-input v-model="options.groups" clearable placeholder="请输入群组" size="mini"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="loadList"><span class="el-icon el-icon-search"></span> 查询
                </el-button>
                <el-button size="mini" @click="resetOption('optionForm')"><span
                  class="el-icon el-icon-refresh-left"></span> 重置
                </el-button>
              </el-form-item>
              <el-form-item class="floatRight">
                <el-button size="mini" type="success" @click="add"><span class="el-icon el-icon-plus"></span>新增
                </el-button>
                <el-button size="mini" type="warning" @click="downloadTab"><span
                  class="el-icon el-icon-download"></span>下载用户表模板
                </el-button>
                <el-button size="mini" type="warning" @click="importTab"><span class="el-icon el-icon-upload2"></span>导入用户表
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="page noBlueBg" slot="bottom">
            <el-pagination
              @size-change="changeSize"
              @current-change="changePage"
              :page-sizes="[20, 50, 100, 200]"
              :current-page="page"
              :page-size="limit"
              layout="sizes,total,prev, pager, next, jumper"
              :total="totals">
            </el-pagination>
          </div>
        </TableList>
      </div>
      <Dialog :cfg="dialogCfg" ref="dialog">
        <el-form :model="editUser" label-width="80px" :inline="true" :rules="rules" ref="addForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editUser.username" clearable placeholder="请输入用户名" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="editUser.password" clearable placeholder="请输入密码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="editUser.realName" clearable placeholder="请输入姓名" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="editUser.mobile" clearable placeholder="请输入手机号码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="company">
            <el-input v-model="editUser.company" clearable placeholder="请输入单位" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input v-model="editUser.department" clearable placeholder="请输入部门" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="post">
            <el-input v-model="editUser.post" clearable placeholder="请输入岗位" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="群组" prop="groups">
            <el-input v-model="editUser.groups" clearable placeholder="请输入群组" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="groups">
            <el-switch
              v-model="editUser.status"
              active-color="#03AAD3"
              inactive-color="#ccc">
            </el-switch>
          </el-form-item>
        </el-form>
      </Dialog>
    </div>
  </section>
</template>

<script>

  import TableList from 'comp/common/TableList';
  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "User",
    components: {
      Dialog,
      TableList
    },
    data() {
      return {
        nav: 'user',

        unitName: this.$kkui.cache.get('unit'),

        tabHeight: 0,
        options: {
          username: '',
          realName: '',
          mobile: '',
          unit: '',
          department: '',
          groups: ''

        },
        list: [],
        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,

        column: [
          {
            prop: 'username',
            label: '用户名'
          },
          {
            prop: 'realName',
            label: '姓名'
          },
          {
            prop: 'mobile',
            label: '手机号码'
          },
          {
            prop: 'company',
            label: '单位'
          },

          {
            prop: 'department',
            label: '部门'
          },
          {
            prop: 'post',
            label: '岗位'
          },
          {
            prop: 'groups',
            label: '群组'
          },
          {
            prop: 'status',
            label: '状态',
            btn: 'switch'
          },
          {
            prop: '',
            label: '操作',
            btn: 'editAndDel',
            del: (id) => {
              this.del(id)
            },
            edit: (data) => {
              this.edit(data)
            }
          }
        ],
        dialogCfg: {},
        editUser: {
          username: '',
          realName: '',
          password: '',
          mobile: '',
          unit: '',
          department: '',
          post: '',
          groups: '',
          status: true
        },
        rules: {
          realName: [
            {required: true, message: '请输入姓名', trigger: 'change'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'change'}
          ],
          mobile: [
            {required: true, message: '请输入手机号码', trigger: 'change'}
          ],
          company: [
            {required: true, message: '请输入单位', trigger: 'change'}
          ],
          department: [
            {required: true, message: '请输入部门', trigger: 'change'}
          ],
          post: [
            {required: true, message: '请选择岗位', trigger: 'change'}
          ]
        }
      }
    },
    mounted() {
      this.loadList();

    },
    methods: {
      // 更新单位名
      renewUnitName() {
        if (!(this.unitName.trim())) {
          this.$kkui.alert({title: '出错啦！', cont: '当前单位名称为空！'});
          return false;
        }
        this.$server('org.unitName', {
          realName: this.unitName
        }).then(data => {
          this.$kkui.cache.set('unit', this.unitName);
          this.$kkui.msg({
            icon:1,
            cont:'更新成功！'
          })
        })
      },

      //加载列表
      loadList() {
        this.$server('user.list', {
          limit: this.limit,
          page: this.page,
          ...this.options
        }).then(data => {
          this.list = data['rows'].map(item => {
            return {
              ...item,
              status: item['status'] === '1',
            }
          });
          this.totals = data['total'];
          this.$kkui.loading_deepBlue.hide();
        })
      },

      //新增用户
      add() {
        this.editUser = {
          username: '',
          realName: '',
          password: '',
          mobile: '',
          unit: '',
          department: '',
          post: '',
          groups: '',
          status: true
        };
        this.rules.password[0].required = true;
        this.dialogCfg = {
          title: '新增用户',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 430,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$server('user.add',{
                  ...this.editUser,
                  status: this.editUser.status ? '1' : '0'
                }).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '新增成功！'
                  });
                  this.loadList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },

      //编辑用户
      edit(data) {
        this.editUser = {...data};
        this.rules.password[0].required = false;
        this.dialogCfg = {
          title: '编辑用户',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 430,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$server('user.edit',{
                  ...this.editUser,
                  status: this.editUser.status ? '1' : '0'
                }).then(data => {
                  this.loadList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },

      //删除用户
      del(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此用户吗？',
          callback: () => {
            this.$server('user.del',[id * 1]).then(data => {
              this.$kkui.msg({
                icon: '1',
                cont: '删除成功！'
              });
              this.loadList();
            })
          }
        });
      },

      initEditData() {
        this.editUser = {
          username: '',
          realName: '',
          password: '',
          mobile: '',
          unit: '',
          department: '',
          post: '',
          groups: '',
          status: true
        };
      },

      // 下载模板
      downloadTab() {
        const index = this.$kkui.loading.show();
        this.$server('user.downTemplate',{
          tempalteName: 'sys_user'
        }).then(data => {
          const a = document.createElement('a');
          a.href = data;
          a.style.display = 'none';
          a.target = '_blank';
          a.download = '用户表' + '.xls';
          a.click();
          setTimeout(() => {
            this.$kkui.loading.hide(index);
          }, 3000)
        })
      },

      //导入用户表
      importTab() {
        this.$kkui.submit({
          title: '上传用户表格',
          file: true,
          cont: '1'
        }, formData => {
          this.$kkui.alert({
            icon: 0,
            cont: '导入表格将会替换掉相同手机号或用户名的数据，确定吗？',
            callback: () => {
              this.$server('user.importTable',formData).then(data => {
                this.$kkui.msg({
                  icon: '1',
                  cont: '导入成功！'
                });
                this.loadList();
              })
            }
          })
        })
      },


      //切换分页
      changePage(page) {
        this.page = page;
        this.loadList();
      },

      changeSize(limit) {
        this.limit = limit;
        this.loadList();
      },

      // 重置option
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadList();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";
</style>
